<template>
  <view>
    <nav-bar title="项目统计"></nav-bar>
    <scroll-view scroll-y :style="{ height: mainHeight }">
      <view class="time-box">
        <view class="text">选择门店</view>
        <view class="time-list">
          <view>金牛湖店 </view>
          <!-- <view class="icon"><u-icon name="arrow-down" color="#6f6f6f" size="15"></u-icon></view> -->
        </view>
      </view>
      <view class="time-box">
        <view class="text">时间</view>
        <view class="date">
          <uni-datetime-picker :clear-icon="false" v-model="range" type="daterange" @change="maskClick" />
        </view>
        <!-- <view class="time-list">
          <view>{{ beginTime }}-{{ endTime }} </view>
          <view class="icon"><u-icon name="arrow-down" color="#6f6f6f" size="15"></u-icon></view>
        </view> -->
      </view>
      <view class="content"><tab-index @tabClick="tabClick"></tab-index></view>
      <view class="table">
        <view class="head">
          <view style="width: 25%;">序号</view>
          <view style="width: 25%;">项目名称</view>
          <view style="width: 50%;">项目次数</view>
        </view>
        <view class="box" v-for="(item, index) in tableData" :key="index">
          <view style="width: 25%;">{{ index +1 }}</view>
          <view style="width: 25%;">{{ item.name }}</view>
          <view style="width: 50%;">{{ item.number }}次</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'
import tabIndex from '../../../components/statis/tab-index.vue'
export default {
  name: 'earning',
  components: { NavBar, tabIndex },
  data() {
    return {
      mainHeight: '',
      range:[],
      beginTime: '2023.5.30',
      endTime: '2023.5.30',
      tableData: [
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        },
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        },
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        },
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        }
      ],
      projectData: [
        {
          title: '金牛湖店',
          number: '12311111112',
          name: '颈肩推拿60分钟',
          nickName: '李四',
          phone: '18771319801',
          date: '2023年06月12日',
          time: '12点02分22秒',
          earn: '200'
        },
        {
          title: '金牛湖店',
          number: '12311111112',
          name: '颈肩推拿60分钟',
          nickName: '李四',
          phone: '18771319801',
          date: '2023年06月12日',
          time: '12点02分22秒',
          earn: '200'
        },
        {
          title: '金牛湖店',
          number: '12311111112',
          name: '颈肩推拿60分钟',
          nickName: '李四',
          phone: '18771319801',
          date: '2023年06月12日',
          time: '12点02分22秒',
          earn: '200'
        }
      ]
    }
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
  },
  methods: {
    tabClick(item) {
    },
    handelClick(item, index) {
      this.activeIndex = index
    },
    maskClick(e){
		}
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx;
}

.time-box {
  margin-top: 20rpx;
  padding: 0 30rpx;
  display: flex;

  .text {
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    margin-right: 20rpx;
    line-height: 68rpx;
  }

  .time-list {
    display: flex;
    height: 68rpx;
    background-color: #fff;
    line-height: 68rpx;
    border-radius: 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    padding: 0 30rpx;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10rpx;
    }
  }
}

.table {
  // width: 100%;
  background: #FFFFFF;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
  margin: 25rpx 30rpx;


  .box {
    display: flex;
    text-align: center;
    padding: 26rpx 20rpx;
    border-bottom: 1rpx solid #E6E6E6;
    font-size: 33rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #333333;

    &:last-child {
      border-bottom: none;
    }

  }

  .head {
    display: flex;
    text-align: center;
    padding: 26rpx 20rpx;
    border-bottom: 1rpx solid #E6E6E6;
    // justify-content: space-between;
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }
}

</style>